import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


//新增表单
const CreateForm = Form.create()(props => {
    const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
        if (err) return;
    form.resetFields();
    handleAdd(fieldsValue);
});
};
return (
    <Modal
width={800}
height={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical" hideRequiredMark>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="机构名称">
            {form.getFieldDecorator('org_name', {
            rules: [{ required: true, message: '请输入至少五个字符的机构名称！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="机构代码">
            {form.getFieldDecorator('org_code', {
            rules: [{ required: false, message: '请输入至少五个字符的机构代码！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="父机构Id">
            {form.getFieldDecorator('parent_id', {
            rules: [{ required: false, message: '请输入至少五个字符的父机构Id！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>




        <Col  md={12} sm={24}>
        <FormItem  label="层次码">
            {form.getFieldDecorator('levelcode', {
            rules: [{ required: false, message: '请输入至少五个字符的层次码！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col md={12} sm={24}>
        <FormItem label="是否叶子">
            {form.getFieldDecorator('leaf')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                    <Option value="0">是</Option>
                    <Option value="1">否</Option>
                </Select>
            )}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="图标">
            {form.getFieldDecorator('icon', {
            rules: [{ required: false, message: '请输入至少五个字符的图标！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>




        <Col  md={12} sm={24}>
        <FormItem  label="层叠样式">
            {form.getFieldDecorator('cls', {
            rules: [{ required: false, message: '请输入至少五个字符的层叠样式！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>



</Form>
</Modal>
);
});

export default CreateForm;